<!--会员中心 》获取积分-->
<template>
  <div style="width: 100%;height: 600px;margin-left: 60px;overflow: hidden;
        padding: 20px 20px;box-sizing: border-box;font-size: 17px;text-align: left">
    <!--  修改头像部分开始  -->
    <div style="height: 60px">
      <h4 style="margin-top: 0px;margin-bottom: 10px;color: #0aa1ed">积分充值</h4>

      <div style="float: left;margin-right: 20px">
        <el-avatar shape="square"
                   :size="40"
                   :src="'http://localhost:29000'+user.imgUrl"></el-avatar>
      </div>
      <div style="float: left;text-align: left;position: relative;top: 5px">
        <span style="font-size: 14px">会员编号：{{ integrals.memberNum }}</span>
        <span style="font-size: 15px;margin-left: 30px">账户余额：<span
            style="font-weight: bold;font-size: 18px;margin: 0px 5px">{{ integrals.balance }}</span>积分</span>
      </div>
    </div>
    <!--  修改头像部分结束  -->

    <el-divider/>

    <h2>积分充值</h2>


    <div style="margin-top: 20px">
      <div>

      </div>
    </div>
    <div style="display: flex;flex-wrap: wrap">
      <div v-for="item in integral">
        <transition name="el-zoom-in-top">
          <div v-show="isShow">
            <el-link type="primary" @click="recharge(item)" :underline="false">

              <div class="transition-box" style="border: 1px solid rgba(0,0,0,0.1);text-align: center">
                <div>
                  <p style="font-size: 23px;margin-bottom: 20px">{{ item.money }}.00元</p>
                  <p style="font-size: 15px;margin-top: 0 ">{{ item.intearal }}积分</p>
                </div>
              </div>
            </el-link>
          </div>
        </transition>
      </div>
    </div>

    <div style="margin-top: 20px">
      <p style="font-weight: bold;margin-bottom: 20px;font-size: 13px">获取积分</p>
      <div style="font-size: 10px;color: #8c939d">
        <p>以上为充值方式获取积分，您可以直接购买相应的积分。</p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "MemberEarnPointsView",
  data() {
    return {
      user: {},
      integrals: {},
      isShow:false,
      integral:[]
    }
  },
  methods: {
    recharge(item) {
      let jwt=JSON.parse(localStorage.getItem('user')).token;
      let integraRache={transAmount:'',integra:''};
      integraRache.integra=item.intearal;
      integraRache.transAmount=item.money;
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
                    }
                  })
          .post("http://localhost:29000/v1/integra/rache",integraRache).then((response)=>{
            if (response.data.code==20000){
              let alipay=response.data.data;
              this.pay(alipay);
            }else{
              this.$message.error(response.data.message);
            }
      })
    },

    payment(alipay){//支付
      let jwt=JSON.parse(localStorage.getItem('user')).token;
      let data=this.qs.stringify(alipay)
      localStorage.setItem("Authorization",jwt)
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .get("http://localhost:29000/v1/alipay/pay",data);
    },

    pay(order) {
      let url = 'http://localhost:29000/v1/alipay/pay';
      let params = {
        outTradeNo: order.outTradeNo,
        subject: order.subject,
        totalAmount: order.totalAmount
      }
      window.open(url + '?'+ this.qs.stringify(params));
    }

    // pay(item) {
    //   let url = 'http://localhost:29000/v1/alipay/pay';
    //   let params = {
    //     outTradeNo: item.outTradeNo,
    //     subject: "泡泡积分充值",
    //     totalAmount: item.totalAmount
    //   }
    //   window.open()
    //    location.href=`https://excashier-sandbox.dl.alipaydev.com/standard/auth.htm?payOrderId=${item.outTradeNo}`
    // }

  },
  mounted() {
    this.user = JSON.parse(localStorage.getItem('user'));
    if (this.user == null) {
      this.$message.error("请登录后重试！")
      this.$router.push('/login');
    }

    let jwt = this.user.token;
    this.axios
        .create({
          'headers': {
            'Authorization': jwt
          }
        })
        .get('http://localhost:29000/v1/integrals/get')
        .then((response) => {
          if (response.data.code == 20000) {
            this.integrals = response.data.data;
          }
        })

    this.axios
        .create({
          'headers': {
            'Authorization': jwt
          }
        })
        .get("http://localhost:29000/v1/integrals/integral-list")
    .then((response)=>{
      if (response.data.code==20000){
        this.integral=response.data.data;
      }
    })

    this.isShow=true;


  }
}
</script>

<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 120px;
  height: 120px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 20px 10px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>